<template>
  <div class="w-100%">
    <section v-if="isOpen" class="pb-10px">
      <div class="search-container">
        <div class="search-list">
          <slot />
        </div>
      </div>
      <!-- 搜索按钮 -->
      <div class="flex justify-end pr-24px">
        <!-- <a-button>添加搜索条件</a-button> -->
        <a-button type="primary" size="small" style="font-size: 12px; background: #006ad4" @click="searchFun(true)">过滤</a-button>
      </div>
    </section>
    <div class="search-bar">
      <div>
        <slot name="left" />
      </div>
      <div class="flex items-center justify-end">
        <div class="mr-10px">
          <a-input v-show="showKeyword" v-model:value="keywords" :placeholder="placeholder" size="small" style="width: 200px" @press-enter="searchFun(false)">
            <template #prefix>
              <icon-font type="icon-sousuo" class="pointer" style="color: #ddd" @click.stop="showKeyword = false" />
            </template>
          </a-input>
          <icon-font v-show="!showKeyword" type="icon-sousuo" class="pointer" @click.stop="showKeyword = true" />
        </div>
        <div class="filter-box mr-10px" :class="isOpen ? 'show-list' : ''">
          <span v-if="searchCount" class="dot">{{ searchCount }}</span>
          <icon-font type="icon-filter" class="pointer" @click="isOpen = !isOpen" />
        </div>
        <slot name="actions" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
/**
 * --------------------------------------------------------------------
 * Component
 * ----------------------------------------------------------------------
 * Description 未经许可不能去掉去掉boli相关版权信息
 * ----------------------------------------------------------------------
 * Author: Eric E-mail: <huaboli1314@163.com>
 * ----------------------------------------------------------------------
 */
const { excludeKeys, params } = defineProps({
  excludeKeys: {
    type: Array,
    default: () => [],
  },
  params: {
    type: Object,
    default: () => {},
  },
  placeholder: {
    type: String,
    default: '输入关键字',
  },
})

const emit = defineEmits(['search'])

// 展开折叠
const isOpen = ref(false)
const searchCount = ref(0)
const keywords = ref('')
const showKeyword = ref(false)

function searchFun(close: boolean) {
  if (close) {
    isOpen.value = false
    emit('search')
  } else {
    showKeyword.value = false
    emit('search', keywords.value)
    keywords.value = ''
  }
  nextTick(() => {
    let count = 0
    Object.keys(params).forEach(key => {
      if (params[key] || params[key] === 0) {
        if (!excludeKeys.includes(key)) {
          count++
        }
      }
    })
    searchCount.value = count
  })
}
</script>

<style lang="less" scoped>
.search-container {
  width: 100%;
  max-height: 280px;
  padding: 20px 0 0 20px;
  margin-bottom: 10px;
  overflow-y: scroll;
}

.search-list {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  font-size: 14px;
  color: #575757;
}

.search-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  padding: 10px 20px;
  background: #fff;

  .filter-box {
    position: relative;
    padding: 2px 3px;
    border-radius: 3px;

    &.show-list {
      color: var(--current-color);
      background: var(--current-bg);
    }

    .dot {
      position: absolute;
      top: -8px;
      right: -8px;
      z-index: 10;
      display: block;
      width: 16px;
      height: 16px;
      font-size: 10px;
      line-height: 16px;
      color: #fff;
      text-align: center;
      background: #006ad4;
      border-radius: 8px;
      box-shadow: 0 0 0 2px #fff;
    }
  }
}
</style>
